<template>
    <div class="container">
        <!-- 展示的数据变成行显示 -->
        <div class="row">
              
            <div v-for="(item,index) in goodlist" :key="index"  >
                <figure>                                                             <!-- 将图片角变成弧形 -->
                <img :src="'http://127.0.0.1:8000/static/upload/'+item.img" width="240" height="240" class="rounded-corners img-fluid">
                
               <a :href="'http://localhost:8080/details?id='+item.id"> <p>{{item.name}}</p></a>
                    <!-- 美化字体 -->
                <p class="emphasis">{{item.price}}</p>
                </figure>
            </div>
            <div>
             <Pagination @change="get_goods" v-model="pagination" layout="pager,jumper" ></Pagination>
            </div>
        </div>
    </div>
    

</template>

<script>
export default {
    data () {
        return {
            goodlist:[],
            //定义分页器变量
            pagination:{
                //当前页
                page:1,
                //一页展示多条数据
                size:5,
                //一共多少数据
                total:''
            }
            
        }
    },
    methods: {
        get_goods(){
            this.axios.get('http://localhost:8000/weekgoodlist/',{params:{page:this.pagination.page,size:this.pagination.size}})
            .then(a=>{
                console.log(a)
                this.goodlist=a.data.msg
                this.pagination.total=a.data.count
            })
        }
    },
    mounted() {
        this.get_goods()
    },

}
</script>

<style>

</style>
